<template>
  <div class="power-list-page">
    <div class="power-list-page-header">我在集字抢好礼，一起加入吧！</div>
    <div class="power-list-page-middle">
      <div class="user-info">
        <div class="user-info-image">
           <img :src="userInfo.avatar" >
        </div>
        <p class="user-info-name">{{userInfo.name}}</p>
      </div>
      <div class="jump" @click="jumpWordPage">马上去集字</div>
    </div>
    <div class="power-list-page-footer">
      <p class="footer-text">恭喜您获得好友赠送的</p>
      <div class="footer-word">
        <div class="footer-word-image">
          <img :src="words.dark_image">
        </div>
        <div class="footer-word-table"></div>
      </div>
    </div>
    <div class="power-list-page-attention" @click="openAttention">点击关注得两次抽卡机会</div>
    <div class="power-list-page-warpe">
      <power-list :helper="helpers"></power-list>            
    </div>
    <div class="power-list-page-rule-warpe">
      <rule @openAttentionShow="openAttention"></rule>
    </div>
    <div class="power-list-page-prize-warpe">
      <prize></prize>                   
    </div>
    <popup :show="attentionShow" @shutDown="shutDown" v-if="attentionShow"></popup>
    <!-- <div class="popup" v-show="attentionShow">
      <yd-popup v-model="attentionShow" position="center"  masker-opacity=".7">
        <p class="popup-text">长按识别二维码关注公众号</p>
        <div class="qc-code">
          <img src="../../assets/img/qc-code.jpg" class="qc-code-image">
        </div>
        <p class="popup-text">关注接收重要通知</p>
        <div class="shut-down" @click="shutDown">
          <img src="../../assets/img/shut-down.png" class="shut-down-image">
        </div>
      </yd-popup>
    </div> -->
  </div>
</template>

<script>
import PowerList from '../../components/PowerList'
import Rule from '../../components/Rule'
import Prize from '../../components/Prize'
import Popup from '../../components/Popup'
import $fly from 'flyio'
import api from '../../assets/js/api.js'
import { Dialog } from 'vant'
export default {
  name: 'GiftInformation',
  data () {
    return {
      attentionShow: false,
      userInfo: {},
      words: {},
      helpers: [],
      code: ''
    }
  },
  components: {
    PowerList,
    Rule,
    Prize,
    Popup,
    Dialog
  },
  created () {
    // this.code = Object.keys(this.$route.query).toString()
    console.log(this.$route.query.code)
  },
  mounted () {
    //获取赠字信息
     api.authRequest({
       url: 'words/receive?include=receiver.game,receiver.helpers',
       method: 'post',
       data:{no: this.$route.query.code}
     })
     .then ( (res) => {
       if (res.status === 200) {
         this.userInfo = {avatar: res.data.receiver.avatar, name: res.data.receiver.name}
         this.words = res.data.word
         this.helpers = res.data.receiver.helpers.data
       }
     })
     .catch( (err) => {
       console.log(err)
       if (err.status === 400 || err.status === 422) { //根据状态码，弹窗显示不同得内容
          Dialog.alert({
           message: err.response.data.message,
          })
         .then( () => {
           this.$router.push({path: '/'})
         })
         console.log(err.status)
       }
       if (err.status === 404) {
         Dialog.alert({
           message: '该字长时间未被领取，已归还给赠字者',
         })
         .then( () => {
           this.$router.push({path: '/'})
         })
       }
     })
  },
  beforeRouteEnter (to, from, next) {
    if (!localStorage.getItem('access_token')) {
      localStorage.setItem('powerListPage', 'help') 
      next('/')
    } else {
      next()
    }
  },
  methods: {
    openAttention () {
      this.attentionShow = true
    },
    shutDown () {
      this.attentionShow = false
    },
    jumpWordPage () {
      this.$router.push({path: '/WordPage'})
    }
  },
  beforeDestroy () {
    localStorage.removeItem("powerListPage")
  }
}
</script>

<style lang="stylus" scoped>
  .power-list-page
    padding-top 85px
    height 3595px
    background url("../../assets/img/power-list-page-background.png") no-repeat
    background-size cover
    .power-list-page-header
      width 581px
      height 152px
      background url("../../assets/img/power-list-page-heaader-background.png") no-repeat
      background-size cover
      margin 0 auto
      line-height 120px
      text-align center
      color #f15f8a
      font-size 36px
    .power-list-page-middle
      width 650px
      margin 0 auto
      display flex
      justify-content center
      .user-info
        display flex
        flex-direction column
        .user-info-image
          width 200px
          height 200px
          img
            width 100%
            height auto
            border-radius 50%
        .user-info-name
          text-align center
          color #ffffff
          font-size 36px
          margin-top 21px
      .jump
        width 329px
        height 97px
        background url("../../assets/img/power-list-page-jump.png") no-repeat
        background-size cover
        line-height 90px
        font-size 48px
        color #fff
        text-align center
        margin-top 60px
    .power-list-page-footer
      margin 122px 0 92px
      .footer-text
        text-align center
        color #ffffff
        font-size  36px
      .footer-word
        width 547px
        margin -20px auto 0
        transform: perspective(1000)
        .footer-word-image
          width 220px
          height 220px
          margin 0 auto
          transform: perspective(1000)
          transform translate3d(0, 70px, 15px)
          img
            width 100%
            height auto
        .footer-word-table
          width 547px
          height 131px
          background url("../../assets/img/power-list-page-table.png") no-repeat
          background-size cover
    .power-list-page-attention
      width 606px
      height 97px
      background url("../../assets/img/power-list-page-attention.png") no-repeat
      background-size cover
      margin 0 auto 122px
      font-size 48px
      color #fff
      text-align center
      line-height 90px
    .power-list-page-warpe
      margin-bottom 133px
    .power-list-page-rule-warpe
      margin-bottom 117px
    // .popup
    //   height 100%
    //   .popup-text
    //     color #fff
    //     font-size 28px
    //     text-align center
    //     margin-bottom 30px
    //   .qc-code
    //     width 258px
    //     height 258px
    //     margin 0 auto 30px
    //     .qc-code-image
    //       width 100%
    //       height auto
    //   .shut-down
    //     width 64px
    //     height 64px
    //     margin 100px auto 0
    //     color #fff
    //     .shut-down-image
    //       width 100%
    //       height auto
</style>
